<?php
session_start();
include_once "checkLogin.php";
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="css/menu.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/nav.js" type="text/javascript"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="js/TweenMax.min.js"></script>
    <link href="css/word.css" rel="stylesheet" type="text/css"/>
    <title>图书借阅</title>
    <style>

        #content #imgs {
            width: 5%;
            position: relative;
            left: 3%;
        }

        #content #dangan {
            position: relative;
            left: 4%;
            bottom: -8px;
            box-shadow: -4px -4px 10px #9db7c8;
            font-size: 22px;
            font-weight: 100;
        }

        #content thead tr {
            background-color: #E2F5F7;
        }

        #content thead th {
            color: black;
            font-weight: bold;
            border-right: 2px solid white;
            text-align: center;
        }

        table td {
            color: black;
        }

        tbody td a {
            font-size: 1.1em;
            color: skyblue;
            cursor: pointer;
        }

        #content {
            width: 95%;
            border: 1px solid #dddddd;
            margin: 20px auto;
        }

        #now {
            margin-left: 5%;
            margin-top: 1%;
        }

        #mains {
            display: flex;
            justify-content: flex-start;
            padding: 5px;
        }

        #mains img {
            margin-left: 6%;
            position: relative;
            top: -5px;
        }

        .layui-form {
            margin-left: 10px;
        }

        #btn {
            margin-left: 10px;
        }

        #contents {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            margin-left: 45px;
        }

        #search {
            height: 42px;
            background-color: #9bcff2;
            padding-top: 5px;
            padding-left: 45px;
        }

        #search .layui-form {
            display: flex;
            justify-content: flex-start;

        }

        .layui-form-radio > i:hover, .layui-form-radioed > i {
            color: black;
        }

        #input {
            width: 400px;
        }

        #content table {
            width: 100%;
            margin-left: 0;
        }
    </style>
</head>
<body>
<canvas id="Mycanvas" style="position: absolute;left: 0%;width: 100%;height: 99%"></canvas>
<div id="main">
    <header>
        <div id="header1">
            <div id="a"></div>
            <img src="img/logo1.png">
            <h2 class="letter-wrap" data-stagger="-0.015">清华大学图书馆管理系统</h2>
            <span>当前登录用户：<?php echo $_SESSION['admin'] ?></span>
        </div>
    </header>
    <div class="navmain">
        <div id="time"><span></span></div>
        <ul id="nav_all">
            <li><a href="index.php">首页</a></li>
            <?php
            include_once "conn.php";
            $main = new main();
            $info = $main->checkAdmin($_SESSION['admin']);
            if ($info['system']) {
                ?>
                <li><a href="#">系统设置</a>
                    <ul style="display: none;">
                        <li><a href="library.php">图书馆信息</a></li>
                        <li><a href="admin.php">管理员设置</a></li>
                        <li><a href="#">参数设置</a></li>
                        <li><a href="shujia.php">书架设置</a></li>
                    </ul>
                </li>
                <?php
            }
            if ($info['readerset']) {
                ?>
                <li><a href="#">读者管理</a>
                    <ul style="display: none;">
                        <li><a href="readertype.php">读者类型管理</a></li>
                        <li><a href="user.php">读者档案管理</a></li>
                    </ul>
                </li>
                <?php
            }
            if ($info['bookset']) {
                ?>
                <li><a href="tushudangan.php">图书档案管理</a></li>
                <?php
            }
            if ($info['book']) {
                ?>
                <li><a>图书借还</a>
                    <ul style="display: none;">
                        <li><a href="bookjieyue.php">图书借阅</a></li>
                        <li><a href="bookxujie.php">图书续借</a></li>
                        <li><a href="bookback.php">图书归还</a></li>
                    </ul>
                </li>
                <?php
            }
            if ($info['syschaxun']) {
                ?>
                <li><a>系统查询</a>
                    <ul style="display: none;">
                        <li><a href="tushudanganchaxun.php">图书档案查询</a></li>
                        <li><a href="jieyuechaxun.php">图书借阅查询</a></li>
                        <li><a href="jieyue.php">借阅到期提醒</a></li>
                    </ul>
                </li>
                <?php
            }
            ?>
            <li>
                <a href="pw.php">更改口令</a>
            </li>
            <li><a href="zhuxiao.php">注销</a></li>
        </ul>
    </div>
    <div id="b"></div>
    <img id="null" src="img/null.png" style="width: 9%;position: absolute;top: 62%;left:43%;display: none ">
    <img id="load" src="img/loding.gif" style="position: absolute;top: 45%;left:35%; display: none">
    <div id="c">
        <div id="now">当前位置：图书档案管理 > 图书借阅 >>></div>
        <div id="content">
            <img id="imgs" src="img/book.png">
            <span id="dangan">图书借阅</span>
            <hr class="layui-bg-green">
            <div id="mains">
                <img src="img/yanzheng.gif">
                <div class="layui-form">
                    <label class="layui-form-label">读者条形码:</label>
                    <div class="layui-input-inline">
                        <input id="barcode" type="text" name="barcode" required lay-verify="required"
                               placeholder="请输入读者条形码"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-input-inline">
                        <button id="btn" class="layui-btn" lay-submit lay-filter="formDemo1">确定</button>
                    </div>
                </div>
            </div>
            <hr class="layui-bg-black">
            <div class="layui-form" id="contents">
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" required lay-verify="required" readonly
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">性别:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="sex" required lay-verify="required" readonly
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">读者类型:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="readertype" required lay-verify="required" readonly
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">证件类型:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="zhengjian" required lay-verify="required" readonly
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">证件号码:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="number" required lay-verify="required" readonly
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">可借数量:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="jienum" required lay-verify="required" readonly
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div id="search">
                <div class="layui-form">
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label">添加的依据:</label>
                        <div class="layui-input-block" style="display: flex;justify-content: flex-start">
                            <input type="radio" name="search" value="1" title="图书条形码" checked="">
                            <input type="radio" name="search" value="2" title="图书名称">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <input type="text" id="input" name="title" required lay-verify="required"
                                   placeholder="请输入内容" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item" style="margin-left: 20%">
                        <div class="layui-input-inline">
                            <button id="btn" class="layui-btn" lay-submit lay-filter="formDemo">确定</button>
                        </div>
                    </div>
                </div>
            </div>
            <div style="border: 5px solid #d4e4ee">
                <table class="layui-table" lay-even lay-skin="nob" style="margin-top: 0;border: 1px solid white">
                    <colgroup>
                        <col width="150">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>图书名称</th>
                        <th>借阅时间</th>
                        <th>应还时间</th>
                        <th>出版社</th>
                        <th>书架</th>
                        <th>定价(元)</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <div id="demo7" style="position: absolute;"></div>
            </div>

        </div>
    </div>
    <footer>
        <hr id="one">
        <hr id="two">
        CopyRight © 2019 www.cdp.cn.com 清华大学图书馆
    </footer>
</div>
</body>
<script src="layui/layui.js"></script>
<script src="js/bg.js"></script>
<script src="js/logo.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form','laypage'], function () {
        var layer = layui.layer
            , form = layui.form
            ,laypage = layui.laypage;
        form.on('submit(formDemo1)', function (data) {
            barcode = data.field.barcode;
            console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
            fash = function () {
                tiaojian = 0;
                $.ajax({
                    type: "POST",
                    url: "getbookback.php",
                    data: {
                        barcode: data.field.barcode,
                    },
                    dataType: 'JSON',
                    cache: false, //不缓存此页面
                    beforeSend: function () {
                        $("#load").css('display', 'block');
                    },
                    success: function (data) {
                        if (data) {
                            $("#load").css('display', 'none');
                            console.log(data[0]);
                            userid = data[0];
                            if (data.length === 0) {
                                $("#null").css('display', 'block');
                            } else {
                                $("#null").css('display', 'none');
                            }
                            $("#contents input").val('');
                            user = data.name;
                            $("input[name='name']").val(data.name);
                            $("input[name='sex']").val(data.sex);
                            $("input[name='readertype']").val(data.typename);
                            $("input[name='zhengjian']").val(data.zhenjian);
                            $("input[name='number']").val(data.idcard);
                            number = data.number - data.numbers;
                            $("input[name='jienum']").val(number);
                        } else {
                            $("#contents input").val('暂无数据');
                            form.on('submit(formDemo)', function () {
                                layer.tips('请输入正确读者条形码!', $("#barcode"), {
                                    tips: [1, '#3595CC'],
                                    time: 4000
                                });
                                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                            });
                        }
                    }
                });
                $.ajax({
                    type: "POST",
                    url: "getuserbookback.php",
                    data: {
                        barcode: data.field.barcode,
                        tiaojian:0//筛选
                    },
                    dataType: 'JSON',
                    cache: false, //不缓存此页面
                    success: function (data) {
                        zs = data.length;
                        console.log(zs);
                        laypage.render({
                            elem: 'demo7'
                            ,limit:4
                            ,count: zs
                            ,jump: function(obj){
                                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                                console.log(obj.limit); //得到每页显示的条数
                                $.ajax({
                                    type: "POST",
                                    url: "getuserbookback.php",
                                    data: {
                                        barcode: barcode,
                                        one:obj.curr,
                                        two:obj.limit,
                                        tiaojian:1//筛选
                                    },
                                    dataType: 'JSON',
                                    cache: false, //不缓存此页面
                                    beforeSend: function () {
                                        $("#load").css('display', 'block');
                                    },
                                    success: function (data) {
                                        $("#load").css('display', 'none');
                                        console.log(data);
                                        if (data.length === 0) {
                                            $("#null").css('display', 'block');
                                            $("#demo7").css('display', 'none');
                                        } else {
                                            $("#null").css('display', 'none');
                                            $("#demo7").css('display', 'block');
                                        }
                                        document.querySelector("tbody").innerHTML = '';
                                        for (let i = 0; i < data.length; i++) {
                                            let s =
                                                `<tr>
                                    <td>${data[i]['bookname']}</td>
                                    <td>${formatDateTime(data[i]['jietime'] * 1000)}</td>
                                    <td>${formatDateTime(data[i]['backtime'] * 1000)}</td>
                                    <td>${data[i]['chuban']}</td>
                                    <td>${data[i]['shujia']}</td>
                                    <td>${data[i]['price']}</td>
                            </tr>`;
                                            document.querySelector("tbody").innerHTML += s;
                                        }
                                        function formatDateTime(inputTime) {
                                            var date = new Date(inputTime);
                                            var y = date.getFullYear();
                                            var m = date.getMonth() + 1;
                                            m = m < 10 ? ('0' + m) : m;
                                            var d = date.getDate();
                                            d = d < 10 ? ('0' + d) : d;
                                            return y + '-' + m + '-' + d;
                                        }
                                    }
                                });
                            }
                        });
                    }
                });

            };
            fash();
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        form.on('submit(formDemo)', function (data) {
            if ($("#barcode").val()){
                console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
                console.log(barcode); //当前容器的全部表单字段，名值对形式：{name: value}
                search = data.field.search;
                function x(barcode) {
                    layer.open({
                        type: 1,
                        title: "确定借阅 ",
                        closeBtn: 0,
                        scrollbar: false,//屏蔽浏览器滚动条
                        skin: 'layui-layer-rim', //加上边框
                        area: ['600px', '480px'], //宽高
                        content: `<div class="layui-form" id="book">
                                <div style="margin: 30px auto;margin-left: 30px;">
                                    <div class="layui-form-item" >
                                        <label style="width: 20%" class="layui-form-label">借阅人姓名：</label>
                                        <div class="layui-input-inline">
                                        <input type="text" name="names" required lay-verify="required"  autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label style="width: 20%"  class="layui-form-label">图书名称：</label>
                                        <div class="layui-input-inline">
                                        <input type="text" id="pw1" name="bookname" required lay-verify="required"  autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label style="width: 20%"  class="layui-form-label">出版社：</label>
                                        <div class="layui-input-inline">
                                        <input type="text" name="chuban" required lay-verify="required" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                    <div class="layui-form-item">
                                        <label style="width: 20%"  class="layui-form-label">书架：</label>
                                        <div class="layui-input-inline">
                                        <input type="text" name="shujia" required lay-verify="required"  autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label style="width: 20%"  class="layui-form-label">库存：</label>
                                        <div class="layui-input-inline">
                                        <input type="text" name="kucun" id="kucun" required lay-verify="required"  autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label style="width: 20%"  class="layui-form-label">用户可借数量：</label>
                                        <div class="layui-input-inline">
                                        <input type="text" name="numberr" id="tips" required lay-verify="required"  autocomplete="off" class="layui-input" readonly>
                                    </div>
                                </div>
                                <div style="margin-top: 25px;margin-left: 30%">
                                    <button id="btn" class="layui-btn" lay-submit lay-filter="formDemo2">确定借阅</button>
                                    <button  type="reset" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">返回修改</button>
                                </div>
                              </div>
                            </div>`
                    });
                    $.ajax({
                        type: "POST",
                        url: "jieyuebook.php",
                        data: {
                            barcode: barcode,
                            search: data.field.search,
                            value: data.field.title
                        },
                        dataType: 'JSON',
                        cache: false, //不缓存此页面
                        success: function (data) {
                            console.log(data);
                            if (data) {
                                bookid = data[0];
                                console.log(bookid);
                                storage = data.storage;
                                $("input[name='names']").val(user);
                                $("input[name='bookname']").val(data.bookname);
                                $("input[name='chuban']").val(data.chuban);
                                $("input[name='shujia']").val(data.name);
                                $("input[name='kucun']").val(data.storage);
                                $("input[name='numberr']").val(number);
                                form.on('submit(formDemo2)', function (data) {
                                    console.log(data.field);//当前容器的全部表单字段，名值对形式：{name: value}
                                    numberr = data.field.numberr;//当前容器的全部表单字段，名值对形式：{name: value}
                                    console.log(userid, bookid);
                                    if (numberr <= 0) {
                                        layer.tips('该用户可借数量为0!', $("#tips"), {
                                            tips: [1, '#3595CC'],
                                            time: 4000
                                        });
                                    } else if (storage <= 0) {
                                        layer.tips('该图书库存为0!', $("#kucun"), {
                                            tips: [1, '#3595CC'],
                                            time: 4000
                                        });
                                    } else {
                                        $.ajax({
                                            type: "POST",
                                            url: "insertjie.php",
                                            data: {
                                                userid: userid,
                                                bookid: bookid
                                            },
                                            dataType: 'JSON',
                                            cache: false, //不缓存此页面
                                            beforeSend: function () {
                                                layer.closeAll();
                                                var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
                                            },
                                            success: function (data) {
                                                if (data.result == 1 && data.result1 == 1) {
                                                    layer.msg('借阅成功!');
                                                    number = number - 1;
                                                    setTimeout(function () {
                                                        fash();
                                                        layer.closeAll();
                                                        $("#input").val("");
                                                    }, 500)
                                                } else {
                                                    layer.msg('失败!请重试!');
                                                }
                                            }
                                        });
                                    }
                                });
                            } else {
                                form.on('submit(formDemo2)', function () {
                                    layer.msg('没有该图书信息!');
                                });
                                $("#book input").val('暂无数据');
                            }
                        }
                    });
                }
                if (search == 1) {
                    x(barcode);
                } else {
                    layer.open({
                        type: 1,
                        title: "查看图书 ",
                        closeBtn: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['600px', '450px'], //宽高
                        content: `<table class="layui-table">
                                                   <thead>
                                                     <tr>
                                                       <th>序号</th>
                                                       <th>条形码</th>
                                                       <th>图书名称</th>
                                                       <th>作者</th>
                                                       <th>出版社</th>
                                                     </tr>
                                                   </thead>
                                                   <tbody id="tb">
                                                   </tbody>
                                                 </table>`
                    });
                    $.ajax({
                        type: "POST",
                        url: "chaxunbook.php",
                        data: {
                            value: data.field.title
                        },
                        dataType: 'JSON',
                        cache: false, //不缓存此页面
                        success: function (data) {
                            for (let i = 0; i < data.length; i++) {
                                let s =
                                    `<tr>
                                    <td>${i+1}</td>
                                    <td>${data[i]['barcode']} </td>
                                    <td>
                                        <a href="#" class="barcode" rel="${data[i]['barcode']}" >${data[i]['bookname']}</a>
                                    </td>
                                    <td>${data[i]['author']} </td>
                                    <td>${data[i]['chuban']}</td>
                                                    </tr>`;
                                document.querySelector("#tb").innerHTML += s;
                                $(".barcode").click(function () {
                                    let barcode = $(this).attr("rel"); //对应id
                                    layer.closeAll();
                                    x(barcode);
                                })
                            }
                        }
                    });
                }
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            }
            else{
                layer.tips('请填写读者条形码!', '#barcode');
            }

        });

    });
</script>
</html>


